<template><div><h1 id="字符串转换为数组的-js-函数" tabindex="-1"><a class="header-anchor" href="#字符串转换为数组的-js-函数" aria-hidden="true">#</a> 字符串转换为数组的 JS 函数</h1>
<p>数组是 JavaScript 中最强大的数据结构，我发现自己通过将字符串转换为数组来解决许多算法。所以我想到了整合和比较各种方法来做同样的事情。<br>
从字符串到数组的转换总是使用 split() 方法完成，但是在 ES6 之后，我们可以使用许多工具来做同样的事情。让我们一一介绍每种方法，并讨论每种方法的优缺点。</p>
<h3 id="_1、-使用-split" tabindex="-1"><a class="header-anchor" href="#_1、-使用-split" aria-hidden="true">#</a> 1、 使用 .split('')：</h3>
<p>split() 是一种字符串方法，可将字符串拆分为具有模式的有序列表的数组。这是一种 ES6 方法，是完成工作的最干净的方法。</p>
<div class="language-javascript ext-js line-numbers-mode"><pre v-pre class="language-javascript"><code><span class="token comment">////* Seperate string by space character(' ') *////</span>

<span class="token keyword">const</span> myFavShow <span class="token operator">=</span> <span class="token string">'The Office'</span><span class="token punctuation">;</span>
<span class="token keyword">const</span> myFavShowArray <span class="token operator">=</span> myFavShow<span class="token punctuation">.</span><span class="token function">split</span><span class="token punctuation">(</span><span class="token string">''</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>myFavShowArray<span class="token punctuation">)</span> <span class="token comment">//['T', 'h', 'e', ' ', 'O', 'f', 'f', 'i', 'c', 'e']</span>
</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><p>这种方式的另一个优点是我们可以用字符或空格分隔字符串。以下是我们如何做到这一点的示例。</p>
<div class="language-javascript ext-js line-numbers-mode"><pre v-pre class="language-javascript"><code><span class="token comment">////* Seperate string by whitespace(' ') *////</span>
<span class="token keyword">const</span> myFavShow <span class="token operator">=</span> <span class="token string">'The Office'</span><span class="token punctuation">;</span>
<span class="token keyword">const</span> myFavShowArray <span class="token operator">=</span> myFavShow<span class="token punctuation">.</span><span class="token function">split</span><span class="token punctuation">(</span><span class="token string">' '</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>myFavShowArray<span class="token punctuation">)</span> <span class="token comment">//['The', 'Office']</span>


<span class="token comment">////* Seperate string by a character '-' *////</span>
<span class="token keyword">const</span> favDialogue <span class="token operator">=</span> <span class="token string">'Thats-what-she-said'</span><span class="token punctuation">;</span>
<span class="token keyword">const</span> favDialogueArr <span class="token operator">=</span> favDialogue<span class="token punctuation">.</span><span class="token function">split</span><span class="token punctuation">(</span><span class="token string">'-'</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>favDialogueArr<span class="token punctuation">)</span> <span class="token comment">//['Thats', 'what', 'she', 'said']</span>
</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><p>它也适用于正则表达式，你可以在此处找到 split() 的完整文档。<br>
这种方式完美地将字符串元素分离到一个数组中，但它有其局限性。<br>
注意：此方法不适用于不常见的 Unicode 字符。此方法返回字符的 Unicode 而不是实际字符，这可能会使我们的工作变得更复杂，但 MDN 文档已更新，因此，如果我们仅包含 u 标志，我们就可以使其与 Unicode 一起使用。</p>
<div class="language-javascript ext-js line-numbers-mode"><pre v-pre class="language-javascript"><code>
<span class="token string">"😄😄"</span><span class="token punctuation">.</span><span class="token function">split</span><span class="token punctuation">(</span><span class="token regex"><span class="token regex-delimiter">/</span><span class="token regex-source language-regex">(?:)</span><span class="token regex-delimiter">/</span></span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// [ "\ud83d", "\ude04", "\ud83d", "\ude04" ]</span>
<span class="token string">"😄😄"</span><span class="token punctuation">.</span><span class="token function">split</span><span class="token punctuation">(</span><span class="token regex"><span class="token regex-delimiter">/</span><span class="token regex-source language-regex">(?:)</span><span class="token regex-delimiter">/</span><span class="token regex-flags">u</span></span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// [ "😄", "😄" ]</span>
</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h3 id="_2、使用扩展语法-str" tabindex="-1"><a class="header-anchor" href="#_2、使用扩展语法-str" aria-hidden="true">#</a> 2、使用扩展语法 ([…str])</h3>
<p>这是 ES2015 的特性，它使转换变得非常容易。</p>
<div class="language-text ext-text line-numbers-mode"><pre v-pre class="language-text"><code>const myFavShow = 'The Office'
const myFavShowArray = [...myFavShow]
console.log(myFavShowArray) // ['T', 'h', 'e', ' ', 'O', 'f', 'f', 'i', 'c', 'e']
</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><p>在这里消除了我们在 split() 中的限制也有帮助，考虑下面的例子，我们可以使用这种方法轻松拆分任何字符。</p>
<div class="language-javascript ext-js line-numbers-mode"><pre v-pre class="language-javascript"><code><span class="token keyword">const</span> animal <span class="token operator">=</span> <span class="token string">'🦊🦊'</span>
<span class="token keyword">const</span> animalArr <span class="token operator">=</span> <span class="token punctuation">[</span><span class="token operator">...</span>animal<span class="token punctuation">]</span>
console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>animalArr<span class="token punctuation">)</span> <span class="token comment">// ['🦊', '🦊']</span>
</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h3 id="_3、使用-array-from-str" tabindex="-1"><a class="header-anchor" href="#_3、使用-array-from-str" aria-hidden="true">#</a> 3、使用 Array.from(str)：</h3>
<p>阵列，from() 方法从可迭代或类似数组的对象创建一个新的、浅拷贝的 Array 实例。</p>
<div class="language-javascript ext-js line-numbers-mode"><pre v-pre class="language-javascript"><code><span class="token keyword">const</span> myFavShow <span class="token operator">=</span> <span class="token string">'The Office'</span>

<span class="token keyword">const</span> myFavShowArray <span class="token operator">=</span> Array<span class="token punctuation">.</span><span class="token function">from</span><span class="token punctuation">(</span>myFavShow<span class="token punctuation">)</span><span class="token punctuation">;</span>

console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>myFavShowArray<span class="token punctuation">)</span> 
<span class="token comment">// ['T', 'h', 'e', ' ', 'O', 'f', 'f', 'i', 'c', 'e']</span>
</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><p>这种方法在处理不常见的字符时不会引起任何问题。</p>
<div class="language-javascript ext-js line-numbers-mode"><pre v-pre class="language-javascript"><code><span class="token keyword">const</span> str <span class="token operator">=</span> <span class="token string">'😎😎'</span>
<span class="token keyword">const</span> arr <span class="token operator">=</span> Array<span class="token punctuation">.</span><span class="token function">from</span><span class="token punctuation">(</span>str<span class="token punctuation">)</span>
console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>arr<span class="token punctuation">)</span>


<span class="token comment">// ['😎', '😎']</span>
</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h3 id="_4、使用-object-assign-str" tabindex="-1"><a class="header-anchor" href="#_4、使用-object-assign-str" aria-hidden="true">#</a> 4、使用 Object.assign([], str)</h3>
<p>assign() 方法将一个或多个源对象的所有属性复制到目标对象。不过，关于这种方法有两点需要记住。一个是那个对象，二是assign() 复制称为深拷贝的属性值，在使用此方法之前，必须牢记这一点。</p>
<div class="language-javascript ext-js line-numbers-mode"><pre v-pre class="language-javascript"><code>
<span class="token keyword">const</span> myFavShow <span class="token operator">=</span> <span class="token string">'The Office'</span>

<span class="token keyword">const</span> myFavShowArray <span class="token operator">=</span> Object<span class="token punctuation">.</span><span class="token function">assign</span><span class="token punctuation">(</span><span class="token punctuation">[</span><span class="token punctuation">]</span><span class="token punctuation">,</span> myFavShow<span class="token punctuation">)</span><span class="token punctuation">;</span>

console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>myFavShowArray<span class="token punctuation">)</span> 
<span class="token comment">// ['T', 'h', 'e', ' ', 'O', 'f', 'f', 'i', 'c', 'e']</span>
</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><p>另一个是我们和 split() 方法有同样的麻烦：它不能分隔不常见的字符（我们看到的是 Unicode 而不是实际的字符）。</p>
<div class="language-javascript ext-js line-numbers-mode"><pre v-pre class="language-javascript"><code><span class="token keyword">const</span> s <span class="token operator">=</span> <span class="token string">'😄😄'</span>
<span class="token keyword">const</span> a <span class="token operator">=</span> Array<span class="token punctuation">.</span><span class="token function">from</span><span class="token punctuation">(</span>s<span class="token punctuation">)</span>
console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>a<span class="token punctuation">)</span> <span class="token comment">// ['😄', '😄']</span>
</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h3 id="_5、使用老式方法-for-loop-和-array-push" tabindex="-1"><a class="header-anchor" href="#_5、使用老式方法-for-loop-和-array-push" aria-hidden="true">#</a> 5、使用老式方法（for loop 和 array.push()）</h3>
<p>虽然我们有很多选择可以玩，但我不得不提到这种老式的方法，我们使用 for 循环和数组方法 push() 来推送字符串的元素。<br>
这不是最干净的方式，但绝对值得一提的是想要远离 JavaScript 不断变化的复杂性（尽管我更喜欢其他方式）。</p>
<div class="language-javascript ext-js line-numbers-mode"><pre v-pre class="language-javascript"><code><span class="token keyword">const</span> s <span class="token operator">=</span> <span class="token string">'the office'</span><span class="token punctuation">;</span>
<span class="token keyword">const</span> a <span class="token operator">=</span> <span class="token punctuation">[</span><span class="token punctuation">]</span><span class="token punctuation">;</span>
<span class="token keyword">for</span> <span class="token punctuation">(</span><span class="token keyword">const</span> s2 <span class="token keyword">of</span> s<span class="token punctuation">)</span> <span class="token punctuation">{</span>
   a<span class="token punctuation">.</span><span class="token function">push</span><span class="token punctuation">(</span>s2<span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span>
console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>a<span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// ['t', 'h', 'e', ' ', 'o', 'f', 'f', 'i', 'c', 'e']</span>
</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><p>此外，它对不常见 (Unicode) 字符也能很好地工作。看下面的例子。</p>
<div class="language-javascript ext-js line-numbers-mode"><pre v-pre class="language-javascript"><code><span class="token keyword">const</span> s <span class="token operator">=</span> <span class="token string">'𝟘𝟙𝟚𝟛😄😄'</span><span class="token punctuation">;</span>
<span class="token keyword">const</span> a <span class="token operator">=</span> <span class="token punctuation">[</span><span class="token punctuation">]</span><span class="token punctuation">;</span>
<span class="token keyword">for</span> <span class="token punctuation">(</span><span class="token keyword">const</span> s2 <span class="token keyword">of</span> s<span class="token punctuation">)</span> <span class="token punctuation">{</span>
   a<span class="token punctuation">.</span><span class="token function">push</span><span class="token punctuation">(</span>s2<span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span>
console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>a<span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">//['𝟘', '𝟙', '𝟚', '𝟛', '😄', '😄']</span>
</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h3 id="_6、使用-array-prototype-slice-call-string" tabindex="-1"><a class="header-anchor" href="#_6、使用-array-prototype-slice-call-string" aria-hidden="true">#</a> 6、使用 Array.prototype.slice.call('string')</h3>
<div class="language-javascript ext-js line-numbers-mode"><pre v-pre class="language-javascript"><code><span class="token keyword">const</span> favShow <span class="token operator">=</span> <span class="token class-name">Array</span><span class="token punctuation">.</span>prototype<span class="token punctuation">.</span><span class="token function">slice</span><span class="token punctuation">.</span><span class="token function">call</span><span class="token punctuation">(</span><span class="token string">"The Office!"</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>favShow<span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">//['T', 'h', 'e', ' ', 'O', 'f', 'f', 'i', 'c', 'e', '!']</span>
</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div></div></div><p>此方法也有与 split() 方法相同的问题，因此在使用时要注意。</p>
<div class="language-javascript ext-js line-numbers-mode"><pre v-pre class="language-javascript"><code><span class="token keyword">const</span> favShow <span class="token operator">=</span> <span class="token class-name">Array</span><span class="token punctuation">.</span>prototype<span class="token punctuation">.</span><span class="token function">slice</span><span class="token punctuation">.</span><span class="token function">call</span><span class="token punctuation">(</span><span class="token string">"The Office!"</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>favShow<span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">//['\uD83D', '\uDE04', '\uD83D', '\uDE04</span>
</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div></div></div></div></template>


